<template>
	<div class="container">
		<!-- 搜索栏 -->
		<el-form :model="listParams" label-width="80px" :inline="true" size="default">
			<el-form-item>
				<el-input placeholder="请输入用户名称" v-model="listParams.roleName"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button :icon="Search" @click="searchBtn">搜索</el-button>
				<el-button style="color: #FF7670;" :icon="Close" @click="resetBtn">重置</el-button>
				<el-button type="primary" :icon="Plus" @click="addBtn">新增</el-button>
			</el-form-item>
		</el-form>
	</div>
	<el-table :data="tableData.list" style="width: 100%">
		<el-table-column prop="roleId" label="编号" width="120" align="center" />
		<el-table-column prop="roleName" label="角色名称" width="120" align="center" />
		<el-table-column prop="roleTitle" label="角色标题" width="180" align="center" />
		<el-table-column prop="createBy" label="创建者" align="center" width="100" />
		<el-table-column prop="createDate" label="登录日期" align="center" />
		<el-table-column prop="remark" label="角色备注" align="center" />
		<el-table-column align="center" label="操作" width="350">
			<template #default="scope">
				<el-button size="small" :icon="Edit" type="primary" @click="editBtn(scope.$index, scope.row)">编辑</el-button>
				<el-button size="small" :icon="Setting" type="primary"
					@click="assignPermission(scope.row.roleId, scope.row.roleName)">分配权限</el-button>
				<el-button size="small" :icon="Delete" type="danger" @click="deleteBtn(scope.$index, scope.row)">删除</el-button>
			</template>
		</el-table-column>
	</el-table>
	<div class="pagination">
		<el-pagination v-model:current-page="listParams.current" v-model:page-size="listParams.size"
			:page-sizes="[10, 50, 100, 200]" :small="small" :disabled="disabled" :background="background"
			layout="total, sizes, prev, pager, next, jumper" :total="listParams.total" @size-change="sizeChange"
			@current-change="currentChange" />
	</div>
	<RoleAddAndEdit ref="roleAddAndEditRef" @save="save"></RoleAddAndEdit>
	<AssignMenu ref="assignMenuRef" @save="save"></AssignMenu>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { Search, Plus, Close, Edit, Delete, Setting } from '@element-plus/icons-vue';
import { useRoleTable } from '@/composables/role/useRoleTable'
import { useRole } from '@/composables/role/useRole'
import RoleAddAndEdit from '@/components/role/RoleAddAndEdit.vue'
import AssignMenu from '@/components/role/AssignMenu.vue'
const { listParams, searchBtn, resetBtn, tableData, getRoleList, sizeChange, currentChange } = useRoleTable()
const { addBtn, deleteBtn, editBtn, save, roleAddAndEditRef, assignPermission, assignMenuRef } = useRole(getRoleList)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
onMounted(() => {
	getRoleList()
})
</script>

<style scoped lang="scss">
.container {
	overflow: hidden;
	height: 60px;
	line-height: 60px;
	padding: 20px 20px 0 20px;
	background-color: #fff;
	border-radius: 4px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-sizing: border-box;
}

.pagination {
	padding: 20px;
	text-align: right;
	background-color: #fff;
	border-radius: 0 0 4px 4px;
}
</style>